<template>
  <div class="personal-profile">

    <h2>
      <router-link to="/Home" class="return-link">返回</router-link>
    </h2>

    <div class="profile-header">
      <h1>{{ title }}</h1>
    </div>

    <div class="profile-info">
      <p>{{ info }}</p>
    </div>

    <img src='../assets/wxt.jpg' alt="Profile Image" class="profile-image" />
  </div>
</template>

<script>

export default {
  data() {
    return {
      title: "我的个人介绍",
      info: "我是郭伟华，来自广东，喜欢编程和旅行。",
      
    };
  },
};
</script>

<style lang="scss">
$primary-color: #0fb173;
$secondary-color: #8c66b8;
$text-color: #333;
$border-color: #dfe9ea;

.personal-profile {
  background-color: $secondary-color;
  color: $text-color;
  padding: 80px 50px;
  box-shadow: 0px 0px 10px rgba(247, 2, 2, 0.1);

  & > * + * {
    margin-top: 30px;
  }
  border: none;
  border-radius: 0;
}

.return-link,
.profile-image {
  transition: transform 0.3s ease-in-out;
}

.return-link:hover,
.profile-image:hover {
  transform: scale(1.05);
}

.profile-header,
.profile-info {
  padding: 20px;
  text-align: center;
}

.profile-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
</style>